<template>
  <div id="app">
    <!--搜索-->
    <el-row>
        <el-col :span="6"><el-input v-model="ename" size="mini" placeholder="请输入用户账号"></el-input></el-col>
<!--        <el-col :span="6"><el-input v-model="loc"  size="mini" placeholder="请输入"></el-input></el-col>-->
        <el-col :span="6">
            <el-date-picker
                v-model="dateSearch"
                size="mini"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
            </el-date-picker>
        </el-col>
        <el-col :span="6">
            <el-select v-model="dept" size="mini" clearable placeholder="请选择所在部门" @change="$forceUpdate()">
                <el-option
                v-for="item in depts"
                :key="item.deptId"
                :label="item.deptName"
                :value="item.deptId"
                :disabled="item.status=='1'?true:false">
                </el-option>
            </el-select>
        </el-col>
        <el-col :span="6"><el-button type="primary" @click="search"  size="mini" icon="el-icon-search">搜索</el-button>
            &nbsp;<el-button type="primary"  size="mini" icon="el-icon-circle-plus" @click="handleAdd">添加</el-button></el-col>
        
    </el-row>
    <!--分页列表显示-->
    <el-row>
        <el-table
                v-loading="loading2"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                :data="tableData"
                height="460"
                style="width: 100%;"
                >
            <!-- <el-table-column
                    prop="userId"
                    label="用户编号">
            </el-table-column> -->
             <el-table-column
                    prop="deptName"
                    label="部门">
            </el-table-column>
            <el-table-column
                    prop="loginName"
                    label="账号">
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="姓名">
            </el-table-column>
            <!-- <el-table-column
                    prop="email"
                    label="邮箱">
            </el-table-column> -->
            <el-table-column
                    prop="phonenumber"
                    label="手机号码">
            </el-table-column>
            <el-table-column label="性别">
                <template slot-scope="scope">
                    {{ scope.row.sex == 0 ? '男':'女'}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="avatar"
                    label="头像">
                <template slot-scope="scope" class="demo-image__preview">
                    <el-image
                            style="width: 50px; height: 50px"
                            :src="scope.row.avatar"
                            :preview-src-list="srcList">
                    </el-image>
                </template>
<!--                <img :src="imageUrl" style="width: 60px;height: 60px">-->
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态">
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.status"
                         @change='changeStatus($event,scope.row.status,scope.row.userId)'
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="0"
                        inactive-value="1"
                        >
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                    prop="loginDate"
                    label="最后登陆时间">
            </el-table-column>
            <el-table-column
                    prop="createBy"
                    label="创建者">
            </el-table-column>
            <el-table-column
                        prop="remark"
                        label="权限">
                    <template slot-scope="scope">
                        <el-button type="primary"  size="mini" width:10px icon="el-icon-circle-plus" 
                        @click="addRoles(scope.$index, scope.row)">授予角色</el-button>
                    </template>
                </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>
    <!--分页插件-->
    <el-row>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </el-row><br>
    <!--百分比-->
    <el-row>
        <el-tooltip class="item" effect="dark" content="符合条件的用户占比" placement="right-start">
            <el-progress type="circle" width="90" :percentage="maths" v-bind:title="符合条件的员工占比" show-text="true"></el-progress>
        </el-tooltip>
    </el-row>
    <!--添加和更新 弹框-->
    <el-row>
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="form" status-icon :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户编号" :label-width="formLabelWidth" v-if="isShow">
                    <el-input v-model="form.userId" auto-complete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="账号" :label-width="formLabelWidth" prop="loginNum">
                    <el-input v-model="form.loginName" auto-complete="off" :disabled="isShow"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth" prop="userName">
                    <el-input v-model="form.userName" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth" prop="password" v-if="passShow">
                    <el-input v-model="form.password" auto-complete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码" :label-width="formLabelWidth" prop="checkPass" v-if="passShow">
                    <el-input v-model="form.checkPass" auto-complete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email"
                :rules="[
                { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ]">
                    <el-input v-model="form.email" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" :label-width="formLabelWidth" prop="phonenumber">
                    <el-input v-model="form.phonenumber" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                    <el-radio v-model="form.sex" label="0">男</el-radio>
                    <el-radio v-model="form.sex" label="1">女</el-radio>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:11930/api/cs/commonOSS/upload"
                            name="file"

                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="部门" :label-width="formLabelWidth" prop="deptId">
                    <el-select v-model="form.deptId" clearable placeholder="请选择所在部门">
                        <el-option
                                v-for="item in depts"
                                :key="item.deptId"
                                :label="item.deptName"
                                :value="item.deptId"
                                :disabled="item.status=='1'?true:false">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="角色" :label-width="formLabelWidth" prop="checkedRoles">
                    <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <div style="margin: 15px 0;"></div> -->
                    <el-checkbox-group v-model="checkedRoles" @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="item in roleList" 
                            :label="item.roleId" 
                            :key="item.roleId"
                            :disabled="item.status=='1'?true:false">
                            {{item.roleName}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                
                <el-form-item label="最后登陆IP" :label-width="formLabelWidth" v-if="isShow">
                    <el-input v-model="form.loginIp" auto-complete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="最后登陆时间" :label-width="formLabelWidth" v-if="isShow">
                    <el-input v-model="form.loginDate" auto-complete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="创建者" :label-width="formLabelWidth" v-if="isShow">
                    <el-input v-model="form.createBy" auto-complete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="创建时间" :label-width="formLabelWidth" v-if="isShow">
                    <el-input v-model="form.createTime" auto-complete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="更新者" :label-width="formLabelWidth" v-if="isShow">
                    <el-input v-model="form.updateBy" auto-complete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="更新时间" :label-width="formLabelWidth" v-if="isShow">
                    <el-input v-model="form.updateTime" auto-complete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="form.remark" auto-complete="off"></el-input>
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetForm('form')">重置</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrUpdate('form')">确 定</el-button>
            </div>
        </el-dialog>
    </el-row>
    <!-- 授予角色弹框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisibleRoles">
        <el-checkbox-group v-model="checkedRoles" @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="item in roleList" 
                            :label="item.roleId" 
                            :key="item.roleId"
                            :disabled="item.status=='1'?true:false">
                            {{item.roleName}}
                        </el-checkbox>
        </el-checkbox-group>
        <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleRoles = false">取 消</el-button>
                <el-button type="primary" @click="addOrUpdateRole">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
  var roleOptions = [];
  export default {
    data() {
        //loginName在失焦的时候判断有没有重复的用户名
        var validateloginNum = (rule, value, callback) => {
            if(this.title=='用户更新'){
                // alert("111");
                callback();
            }
            let _this=this;
            // alert(this.form.loginName);
            var jsons={  
                    loginName:this.form.loginName
                }
                this.$http({
                    url:'/api/cs/user/queryList',
                    method:'post',
                    data:jsons,
                    header:{
                        'Content-Type':'application/json'  //如果写成contentType会报错
                    }
                })
        .then(function(res){
            console.log(res)
            // alert(_this.form.loginName);
            if(_this.form.loginName == undefined || _this.form.loginName==''){
                callback(new Error('请输入账号'));
            }else if(_this.form.loginName !='' && res.data.code==2000 && res.data.data!=null && res.data.data.length>0){
                    callback(new Error('该账号已经存在，请重新输入'));
            }else{
                callback();
            }
        })
        .catch(function(error){
            console.log(error)
        })
        };
        //验证密码
        var validatePass = (rule, value, callback) => {
        if (value == undefined) {
          callback(new Error('请输入密码'));
        } else {
            // alert(this.form.checkPass);
          if (this.form.checkPass!=undefined) {
            this.$refs.form.validateField('checkPass');
          }
          callback();
        }
      };
      //验证两次输入的密码是否一样
      var validatePass2 = (rule, value, callback) => {
        if (value == undefined) {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      //验证手机号
     var checkPhoneNumber = (rule, value, callback) => {
        const reg = /^1[3|4|5|6|7|8|9]\d{9}$/;
        if (!value) {
            return callback(new Error('请填写手机号码！'))
        } else if (!reg.test(value)) {
            return callback(new Error('请填写正确的手机号码！'))
        }else{
            callback()
        }
     };
      return {
            userName: localStorage.getItem('userName'),
            realName: localStorage.getItem('loginName'),
            tableData:[],
            currentPage:1,//当前页面，默认1
            pageSize:2,//每页显示条数
            total:100,//分页总数量，默认值随便写，初始化时赋予新值
            ename:'',//查询功能
            dialogFormVisible:false,
            dialogFormVisibleRoles:false,
            title:'用户添加',
            form:{},
            loading2:"true",  //加载提示
            options:[],    //部门下拉框
            options_mgr:[],  //上级下拉框
            value4:'',
            isShow:true,
            passShow:true,
            maths:0,
            imageUrl:'',
            depts: [],  //部门集合
            dept: '',  //部门
            checkAll: false,  //是否选择所有角色
            checkedRoles: [],  //选择的角色
            roleList: [],   //所有角色
            isIndeterminate: true,  //属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果
            statusSwitch: true,
            //表单验证
            rules:{
                loginNum:[{ required: true,validator: validateloginNum, trigger: 'blur' }],
                userName:[
                        { required: true, message: '请输入您的真实姓名', trigger: 'blur' },
                        { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
                password:[
                        { required: true, validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                        { required: true, validator: validatePass2, trigger: 'blur' }
                ],
                phonenumber: [{ required: true, validator: checkPhoneNumber, trigger: 'blur' }],
                deptId: [
                    { required: true, message: '请选择所在部门', trigger: 'change' }
                ],
                // checkedRoles: [
                //     { type: 'array', required: true, message: '请至少选择一个角色', trigger: 'change' }
                // ],
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
        },
        dateSearch: '',
        userId:'',
        formLabelWidth:''

      }
    },
    created:function(){
            this.loading2 = "true";
            //初始化
            this.loadData();
            this.loadRole();
            this.loadDept();
            this.loadMgr();
     },
    methods: {
            //重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //表格中更新角色
            addOrUpdateRole(){
                 //定义一个json数据
                var jsons={  
                    userId:this.userId
                }
                var _this = this;
                console.log(this.checkedRoles);
                this.$http({
                    url:'/api/cs/user/update?roles='+this.checkedRoles,
                    method:'post',
                    data:jsons,
                    header:{
                        'Content-Type':'application/json'  //如果写成contentType会报错
                    }
                })
                    .then(function (response) {
                        console.log("=========");
                        console.log(response);
                        if(response.data.code==2000){
                            console.log("角色改变成功");
                            //关闭弹出框
                                _this.dialogFormVisibleRoles=false;
                                //提示更新成功
                                _this.$message({
                                  //  message: '恭喜你，这是一条成功消息',
                                    message: response.data.message,
                                    type: 'success'
                                });
                                //重新加载数据
                                _this.loadData();
                        }else{
                            console.log("角色改变失败");
                            _this.$message.error(response.data.message);
                        }
                    })
                    .catch(function (error) {
                        //失败处理
                        console.log(error);
                        console.log("==========");
                         _this.$message.error("系统异常。。。");
                    });
            },
            //表格中的授予角色，打开弹出框
            addRoles(index, row){
                this.dialogFormVisibleRoles=true;
                //清空多选框选中的
                this.checkedRoles=[];
                this.loadRole();
                this.loadUserRole(index, row);
                this.userId=row.userId;
            },
            //用户账号状态开关改变
            changeStatus($event,num,userId){
                console.log(userId);
                console.log($event);
                console.log(num);
                var _this = this;
                this.$http.put('/api/cs/user/updateStatus?userId='+userId+'&userStatus='+num)
                    .then(function (response) {
                        console.log("=========");
                        console.log(response);
                        if(response.data.code==2000){
                            console.log("用户账号状态改变成功");
                        }else{
                            console.log("用户账号状态改变失败");
                        }
                    })
                    .catch(function (error) {
                        //失败处理
                        console.log(error);
                        console.log("==========");
                    });
            },
            //查询用户对应的角色id集合
            loadUserRole(index, row){
                var _this = this;
                this.$http.get('/api/cs/userRole/selectOne',{
                        params: {
                            id: row.userId
                        }
                    })
                    .then(function (response) {
                        //正确请求时，回调函数
                        console.log("=========");
                        console.log(response);
                        if(response.data.code==2000){
                            // this.roleList = response.data.data;
                            console.log(response.data.data);
                            _this.checkedRoles=response.data.data;
                        }else{
                            console.log("==========");
                        }
                    })
                    .catch(function (error) {
                        //失败处理
                        console.log(error);
                        console.log("==========");
                    });
            },
            //加载角色
            loadRole(){
                var _this = this;
                this.$http.post('/api/cs/role/queryList')
                    .then(function (response) {
                        //正确请求时，回调函数
                        console.log("=========");
                        console.log(response);
                        if(response.data.code==2000){
                            // this.roleList = response.data.data;
                            console.log(response.data.data);
                            _this.roleList=response.data.data;
                        }else{
                            console.log("==========");
                        }
                    })
                    .catch(function (error) {
                        //失败处理
                        console.log(error);
                        console.log("==========");
                    });
            },
              //角色多选框全选的处理
              handleCheckAllChange(val) {
                    this.checkedCities = val ? roleOptions : [];
                    this.isIndeterminate = false;
                },
                //角色多选框选择的处理
                handleCheckedCitiesChange(value) {
                    let checkedCount = value.length;
                    this.checkAll = checkedCount === this.cities.length;
                    this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
                },
              //用户停用的判断
            //   tableRowClassName({row, rowIndex}) {
            //       if (row.status == 1) {
            //       return 'warning-row';
            //       }
            //       return '';
            //   },
              //头像上传成功之后的处理
              handleAvatarSuccess(res,file){
                  this.imageUrl=URL.createObjectURL(file.raw);
                  console.log("返回值-》名称："+file.response.oldFileName
                  +"新路径："+file.response.filePath);
                  console.log(file.response);
                  this.form.avatar=file.response.ossFileUrlBoot;
              },
              //图片上传之前的处理
              beforeAvatarUpload(file) {
                  // const isJPG = file.type === 'image/jpeg';
                  //file.size 上传图片的大小，单位为字节
                  const isLt5M = file.size / 1024 / 1024 < 5;

                  // if (!isJPG) {
                  //     this.$message.error('上传头像图片只能是 JPG 格式!');
                  // }
                  if (!isLt5M) {
                      this.$message.error('上传头像图片大小不能超过 5MB!');
                  }
                  return isLt5M;
              },
      //计算百分比
            mathWay(){
                var _this = this;
                this.$http.get('/api/cs/user/queryCount')
                    .then(function (response) {
                        //正确请求时，回调函数
                        console.log("========="+response);
                        if(response.data.code==2000){
                            let max = response.data.data;
                            let min = _this.total;
                            _this.maths = (min/max*100).toFixed(2);
                        }else{
                            console.log("==========");
                        }
                    })
                    .catch(function (error) {
                        //失败处理
                        console.log(error);
                        console.log("==========");
                    });
            },

            //加载上级下拉框数据
            loadMgr(){
                var _this = this;
                axios.get('/emp/list')
                    .then(function (response) {
                        //正确请求时，回调函数
                        console.log("========="+response);
                        if(response.data.code==2000){
                            _this.options_mgr = response.data.data;
                        }else{
                            console.log("==========");
                        }
                    })
                    .catch(function (error) {
                        //失败处理
                        console.log(error);
                        console.log("==========");
                    });
            },
            //加载部门下拉框数据
            loadDept(){
                var deptList=[];
                var _this = this;
                this.$http.post('/api/cs/dept/queryList')
                    .then(function (response) {
                        //正确请求时，回调函数
                        console.log("=========");
                        console.log(response);
                        if(response.data.code==2000){
                            deptList = response.data.data;
                            _this.depts = deptList;
                        }else{
                            console.log("==========");
                        }
                    })
                    .catch(function (error) {
                        //失败处理
                        console.log(error);
                        console.log("==========");
                    });
            },
            //加载员工数据
            loadData(){
                var dates=this.dateSearch+"";
                // alert(dates.split(","));
                var datess=dates.split(",");
                // alert(datess[0]);
                // alert(datess[1]);
                this.$http.post("/api/cs/user/queryAll?pageNo="+this.currentPage+"&pageSize="+this.pageSize,{
                                            loginName:this.ename,
                                            deptId:this.dept,
                                            startTime:datess[0],
                                            endTime:datess[1]
                                      }).then((response) => {
                                                 console.log(response);
                                              if(response.data.code==2000){
                                                  this.tableData = response.data.data.list;
                                                  this.total = response.data.data.total;
                                                  this.loading2 = "";
                                                  this.mathWay();
                                              }else{
                                                  //失败处理
                                                  console.log(error);
                                              }
                                })
            },
            //各种绑定事件方法
            //每页数量发生变化
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.loadData();
                /* axios.get('/dept/page',{
                     params: {
                         pageNo: this.currentPage,
                         pageSize: this.pageSize
                     }
                 })
                     .then(function (response) {
                         //正确请求时，回调函数
                         console.log(response);
                         if(response.data.code==2000){
                             _this.tableData = response.data.data.pageDept;
                             _this.total = response.data.data.total;
                         }
                     })
                     .catch(function (error) {
                         //失败处理
                         console.log(error);
                     });*/
            },
            //当前页发生变化
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.loadData();
                /*axios.get('/dept/page',{
                    params: {
                        pageNo: this.currentPage,
                        pageSize:this.pageSize
                    }
                })
                    .then(function (response) {
                        //正确请求时，回调函数
                        console.log(response);
                        if(response.data.code==2000){
                            _this.tableData = response.data.data.pageDept;
                            _this.total = response.data.data.total;
                        }
                    })
                    .catch(function (error) {
                        //失败处理
                        console.log(error);
                    });*/
            },
            //查询方法
            search(){
                console.log(this.value2);
                this.loadData();
            },
            //处理添加
            handleAdd(){
                //隐藏添加不需要的
                this.isShow=false;
                this.passShow=true;
                //清空原来form
                this.form={sex:"0"};
                //清空多选框选中的
                this.checkedRoles=[];
                //清空头像显示
                this.imageUrl='';
                //更新显示名称
                this.title="用户添加";
                //对话框显示
                this.dialogFormVisible=true;
                this.loadRole();
                this.form.createBy=this.realName;
                
            },
            //处理编辑（弹出部门更新对话框）
            handleEdit(index, row) {
                console.log(index, row);
                //显示编辑需要的
                this.isShow=true;
                this.passShow=false;
                this.form=row;
                this.imageUrl=row.avatar;
                //更新显示名称
                this.title="用户更新";
                //对话框显示
                this.dialogFormVisible=true;
                this.loadRole();
                this.loadUserRole(index, row);
                this.$refs[this.form].resetFields();
                // this.$refs[formName].clearValidateField("loginNum");
            },

            //提交表单数据（添加或者更新）
            addOrUpdate(formName){
                this.$refs[formName].validate((valid) => {
                    if (!valid) {
                        console.log('error submit!!');
                        // alert("#########@@@@@@@@@@@@@######");
                        return false;
                    } else {
                        // alert('submit!');
                        // alert("###############");
                         var  url ='/api/cs/user/update?roles='+this.checkedRoles;
                        if(this.form.userId==''||this.form.userId==null){
                            url="/api/cs/user/insert?roles="+this.checkedRoles;
                        }
                        var _this=this;
                        this.form.updateBy=this.realName;
                        //提交方法
                        this.$http.post(url, this.form)
                            .then(function (response) {
                                console.log(response);
                                //提交成功
                                if(response.data.code==2000){
                                    //关闭弹出框
                                    _this.dialogFormVisible=false;
                                    //提示更新成功
                                    _this.$message({
                                        //  message: '恭喜你，这是一条成功消息',
                                        message: response.data.message,
                                        type: 'success'
                                    });
                                    //重新加载数据
                                    _this.loadData();
                                }else {
                                    _this.$message.error(response.data.message);
                                }
                            })
                            .catch(function (error) {
                                _this.$message.error('错了哦，这是一条错误消息');
                            });
                    }
                });
            },
            //处理删除（ 部门删除）
            handleDelete(index, row) {
                console.log(index, row);
                var _this=this;
                //确认弹框
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //执行删除
                   this.$http.delete('/api/cs/user/delete?userId='+row.userId)
                        .then(function (response) {
                            //判断删除是否成功
                            if(response.data.code==2000){
                                //提示
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                //重新加载数据
                                _this.loadData();
                            }else {
                                _this.$message.error(response.data.message);
                            }
                        })
                        .catch(function (error) {
                            //失败处理
                            console.log(error);
                            _this.$message.error('删除失败!');
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            }
    },
  }
</script>
<style>
  .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .el-table .warning-row {
             background: grey;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
        /* #app {
            zoom: 0.89;
            -moz-transform: scale(1);
            -moz-transform-origin: 0 0;
        }
        #bilv{
            zoom: 0.89;
            -moz-transform: scale(1);
            -moz-transform-origin: 0 0;
        } */
</style>